<template>
    <view class="u-margin-left-20 u-margin-right-20">
        <view>
           <u-swiper
			   :list="swiperList"
			   height="600"
			   interval="8000"
			   mode="none"
			 ></u-swiper>
        </view>
		<view class="item">
			<view class="item-title">{{name}}</view>
			<view class="item-desc">已服务96365次</view>
		</view>
		<u-gap height="1" bg-color="#f8f8f8"></u-gap>
		<view style="position: relative;">
			<u-card title="下单流程" :border="false" :head-border-bottom="false" padding="0" title-size="32">
				<view class="u-padding-top-45" slot="body">
					<u-steps :list="numList" :current="0" mode="number"  active-color="#0ab0ed"></u-steps>
				</view>
			</u-card>
		</view>
		<view class="btn">
			<u-button size="default" type="primary" @click="preOrder"
			 :custom-style="customStyle">下一步</u-button>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                keyword: '',
                swiperList: [],
				numList: [{
					name: '在线下单'
				}, {
					name: '师傅报价'
				}, {
					name: '选择师傅'
				}, {
					name: '师傅预约'
				}, {
					name: '上门服务'
				} ],
				customStyle: {
					background: '#0ab0ed'
				},
				icon:null,
				name:null,
            }
        },
		onLoad: function (option) {
			this.icon = option.icon
			this.name = option.name
			// let url = "/api/cmsApi/getArticle/"+id;
			// this.$u.get(url).then(res => {
			// 	this.title = res.data.smallTitle
			// 	this.content = res.data.articleContent
			// 	uni.setNavigationBarTitle({
			// 		title:this.title
			// 	})
			// });
			
			uni.setNavigationBarTitle({
				title:this.name
			})
			let swiper= {
				image: this.icon,
				title: this.name,
			}
			this.swiperList.push(swiper)
		},
        methods: {
            clickItem() {
                //拨打固定电话
                uni.makePhoneCall({
                	phoneNumber: '18720989281',
                });
            },
			preOrder(){
				this.$u.route({
					url: 'pages/detail/preOrder',
					params: {
						name: this.name
					}
				})
			}
        }
    }
</script>

<style>
    /* page不能写带scope的style标签中，否则无效 */
    page {
        background-color: rgb(255, 255, 255);
    }
</style>


<style lang="scss" scoped>
	.item{
		padding: 25rpx;
		line-height: 80rpx;
	}
	
    .item-title {
        font-size: 42rpx;
        color: $u-main-color;
        font-weight: bold;
    }

    .item-desc {
        font-weight: normal;
        font-size: 16rpx;
        color: $u-tips-color;
    }
	
	.arrow-right{
		position: absolute;
		top: 0rpx;
		right: 28rpx;
		font-weight: normal;
		font-size: 28rpx;
		color: $u-tips-color;
	}
	
	.wayClass{
		color: #606266;
		padding: 30rpx;
		line-height: 50rpx;
	}
	
	.btn{
		margin-top: 80rpx;
		margin-bottom: 20rpx;
		width: 100%;
	}

</style>
